<template>
  <div class='questions_choice'>
    <el-card class="box-card">
      <div class="btn_wrapper">
        <span style="font-size:12px; color:pink;">说明：目前支持学科和关键字条件筛选</span>
        <el-button @click="questionEntry" type="success" icon="el-icon-edit" class="dir_right" size="small">新增试题</el-button>
      </div>
      <el-form :inline="true" ref="form" label-width="80px">
        <el-row>
          <el-col :span="6">
            <el-form-item label="学科" size="small">
              <el-select @change="getFunction" v-model="queryData.subjectID" placeholder="请选择">
                <el-option
                  v-for="item in subjectList"
                  :key="item.value"
                  :label="item.label"
                  :value="item.value">
                </el-option>
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="6">
            <el-form-item label="二级目录" size="small">
              <el-select v-model="queryData.catalogID" placeholder="请选择">
                <el-option
                  v-for="item in secondDirectory"
                  :key="item.value"
                  :label="item.label"
                  :value="item.value">
                </el-option>
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="6">
            <el-form-item label="标签" size="small">
              <el-select v-model="queryData.tags" placeholder="请选择">
                <el-option
                  v-for="item in tagList"
                  :key="item.value"
                  :label="item.label"
                  :value="item.value">
                </el-option>
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="6">
            <el-form-item label="关键字" size="small">
              <el-input v-model="queryData.keyword" placeholder="根据提干搜索"></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="6">
            <el-form-item label="试题类型" size="small">
              <el-select v-model="queryData.questionType" placeholder="请选择">
                <el-option
                  v-for="item in questionType"
                  :key="item.value"
                  :label="item.label"
                  :value="item.value">
                </el-option>
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="6">
            <el-form-item label="难度" size="small">
              <el-select v-model="queryData.difficulty" placeholder="请选择">
                <el-option
                  v-for="item in difficulty"
                  :key="item.value"
                  :label="item.label"
                  :value="item.value">
                </el-option>
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="6">
            <el-form-item label="方向" size="small">
              <el-select v-model="queryData.direction" placeholder="请选择">
                <el-option
                  v-for="(item,i) in direction"
                  :key="i"
                  :label="item"
                  :value="i">
                </el-option>
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="6">
            <el-form-item label="录入人" size="small">
              <el-select v-model="queryData.creatorID" placeholder="请选择">
                <el-option
                  v-for="item in UserList"
                  :key="item.id"
                  :label="item.username"
                  :value="item.id">
                </el-option>
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="6">
            <el-form-item label="题目备注" size="small">
              <el-input v-model="queryData.remarks"></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="6">
            <el-form-item label="企业简称" size="small">
              <el-input v-model="queryData.shortName"></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="6">
            <el-form-item label="城市" size="small" class="city">
              <el-select @change="getArea" v-model="queryData.province" placeholder="请选择" style="width: 50%">
                <el-option
                  v-for="(item,i) in provinces()"
                  :key="i"
                  :label="item"
                  :value="i">
                </el-option>
              </el-select>
              <el-select v-model="queryData.city" placeholder="请选择" style="width: 50%">
                <el-option
                  v-for="(item,i) in area"
                  :key="i"
                  :label="item"
                  :value="i">
                </el-option>
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="6">
            <el-form-item style="float: right" size="small">
              <el-button @click="clearClick" size="small">清除</el-button>
              <el-button @click="getQuestionsChoice" type="primary" size="small">搜索</el-button>
            </el-form-item>
          </el-col>
        </el-row>
      </el-form>
      <!-- 选项卡 -->
      <el-tabs v-model="activeName" type="card" @tab-click="tabsClick">
        <el-tab-pane label="全部" name="all"></el-tab-pane>
        <el-tab-pane label="待审核" name="Pending"></el-tab-pane>
        <el-tab-pane label="已审核" name="checked"></el-tab-pane>
        <el-tab-pane label="已拒绝" name="rejected"></el-tab-pane>
      </el-tabs>
      <!-- 警告 -->
      <el-alert
        :closable="false"
        type="info"
        show-icon
        style="margin-bottom: 15px;">
        <template slot="title">
          数据一共 {{total}} 条
        </template>
      </el-alert>
      <!-- 表单 -->
      <el-table
        :data="QuestionsChoiceList"
        style="width: 100%">
        <el-table-column
          prop="number"
          label="试题编号"
          width="120px">
        </el-table-column>
        <el-table-column
          prop="subject"
          label="学科">
        </el-table-column>
        <el-table-column
          prop="catalog"
          label="目录">
        </el-table-column>
        <el-table-column
          label="题型">
          <template slot-scope="scope">
            <span v-if="scope.row.questionType==='1'">单选</span>
            <span v-else-if="scope.row.questionType==='2'">多选</span>
            <span v-else>简答</span>
          </template>
        </el-table-column>
        <el-table-column
          label="题干"
          width="280px">
          <template slot-scope="scope">
            <div v-html="scope.row.question"></div>
          </template>
        </el-table-column>
        <el-table-column
          label="录入时间"
          width="180px">
          <template slot-scope="scope">
            {{scope.row.addDate | parseTimeByString}}
          </template>
        </el-table-column>
        <el-table-column
          prop="difficulty"
          label="难度">
          <template slot-scope="scope">
            <span v-if="scope.row.difficulty==='1'">简单</span>
            <span v-else-if="scope.row.difficulty==='2'">一般</span>
            <span v-else>困难</span>
          </template>
        </el-table-column>
        <el-table-column
          prop="creator"
          label="录入人">
        </el-table-column>
        <el-table-column
          prop="chkState"
          label="审核状态">
          <template slot-scope="scope">
            <span v-if="scope.row.chkState===0">待审核</span>
            <span v-else-if="scope.row.chkState===1">已审核</span>
            <span v-else>已拒绝</span>
          </template>
        </el-table-column>
        <el-table-column
          prop="chkRemarks"
          label="审核意见">
        </el-table-column>
        <el-table-column
          prop="chkUser"
          label="审核人">
        </el-table-column>
        <el-table-column
          label="发布状态">
          <template slot-scope="scope">
            <span v-if="scope.row.publishState===0">已下架</span>
            <span v-else>待发布</span>
          </template>
        </el-table-column>
        <el-table-column
          fixed="right"
          label="操作"
          width="250px">
          <template slot-scope="scope">
            <el-button @click="questionPreview(scope.row)" type="text">预览</el-button>
            <el-button type="text" @click="checkClick(scope.row.id)" :disabled="scope.row.chkState===0?false:true">审核</el-button>
            <el-button type="text" @click="entryQusetion(scope.row.id)" :disabled="scope.row.publishState===0?false:true">修改</el-button>
            <el-button @click="isShelves(scope.row)" v-if="scope.row.publishState===0" type="text">上架</el-button>
            <el-button @click="isShelves(scope.row)" v-else type="text">下架</el-button>
            <el-button @click="removeQuestion(scope.row.id)" type="text" :disabled="scope.row.publishState===0?false:true">删除</el-button>
          </template>
        </el-table-column>
      </el-table>
      <!-- 分页 -->
      <el-pagination
        background
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
        :current-page="queryData.page"
        :page-sizes="[5, 10, 20, 50]"
        :page-size="queryData.pagesize"
        layout="prev, pager, next, sizes, jumper"
        :total="total">
      </el-pagination>
      <!-- 题目预览对话框 -->
      <el-dialog
        title="题目预览"
        :visible.sync="questionDialogVisible"
        width="900px">
        <el-row class="preview">
          <el-col :span="6">
            <div>【题型】：{{previewData.questionType==='1'? '单选':(previewData.questionType==='2'?'多选':'简答')}}</div>
          </el-col>
          <el-col :span="6">
            <div>【编号】：{{previewData.id}}</div>
          </el-col>
          <el-col :span="6">
            <div>【难度】：{{previewData.difficulty==='1'? '简单': (previewData.difficulty==='2'? '一般':'困难')}}</div>
          </el-col>
          <el-col :span="6">
            <div>【标签】：{{previewData.tags}}</div>
          </el-col>
          <el-col :span="6">
            <div>【学科】：{{previewData.subjectName}}</div>
          </el-col>
          <el-col :span="6">
            <div>【目录】：{{previewData.directoryName}}</div>
          </el-col>
          <el-col :span="6">
            <div>【方向】：{{previewData.direction}}</div>
          </el-col>
        </el-row>
        <hr />
        【题干】：
        <div style="color: blue">
          <p v-html="previewData.question"></p>
        </div>
        <div v-if="previewData.questionType!=='3'">
          <div>{{previewData.questionType==='1'?'单':'多'}}选题 选项：（以下选中的选项为正确答案）</div>
          <div v-for="(item, i) in previewData.options" :key="i" class="choose">
            <div v-if="previewData.questionType==='1'">
              <el-radio v-model="radio" :label="i" :disabled="radio===i?false:true">{{item.title}}</el-radio>
            </div>
            <div v-if="previewData.questionType==='2'">
              <el-checkbox-group v-model="checkList">
                <el-checkbox :label="i" :disabled="flag[i]">{{item.title}}</el-checkbox>
              </el-checkbox-group>
            </div>
          </div>
        </div>
        <hr />
        【参考答案】：
        <el-button @click="videoPlay" type="danger" size="small">视频答案预览</el-button>
        <div class="video_box" v-if="show">
          <video autoplay controls :src="previewData.videoURL"></video>
        </div>
        <hr />
        【答案解析】：
        <div style="display: inline-block">
          <p v-html="previewData.answer"></p>
        </div>
        <hr />
        【题目备注】：
        <div style="display: inline-block">
          <p>{{previewData.remarks}}</p>
        </div>
        <span slot="footer" class="dialog-footer">
          <el-button type="primary" @click="questionDialogVisible = false">关闭</el-button>
        </span>
      </el-dialog>
      <!-- 审核对话框 -->
      <el-dialog
        @close="closeCheckChoice"
        class="checkChoice"
        title="题目审核"
        :visible.sync="checkDialogVisible"
        width="400px">
        <el-form :model="checkForm" ref="checkFormRef" label-width="80px">
          <el-form-item prop="chkState">
            <el-radio v-model="checkForm.chkState" label="1">通过</el-radio>
            <el-radio v-model="checkForm.chkState" label="2">拒绝</el-radio>
          </el-form-item>
          <el-form-item prop="chkRemarks">
            <el-input v-model="checkForm.chkRemarks" type="textarea" placeholder="请输入审核意见"></el-input>
          </el-form-item>
        </el-form>
        <span slot="footer" class="dialog-footer">
          <el-button @click="checkDialogVisible = false">取消</el-button>
          <el-button type="primary" @click="questionCheck">确认</el-button>
        </span>
      </el-dialog>
    </el-card>
  </div>
</template>

<script>
import { choice, choiceCheck, choicePublish, choiceAdd, detail } from '@/api/hmmm/questions'
import { simple as subjectSimple } from '@/api/hmmm/subjects'
import { simple } from '@/api/hmmm/directorys'
import { simple as tagSimple } from '@/api/hmmm/tags'
import { simple as userSimple } from '@/api/base/users'
import { questionType, difficulty, direction } from '@/api/hmmm/constants'
import { provinces, citys } from '@/api/hmmm/citys'
import parseTimeByString from '@/filters'
export default {
  data () {
    return {
      queryData: {
        page: 1,
        pagesize: 5
      },
      QuestionsChoiceList: [],
      total: 0,
      activeName: 'all',
      // 题目预览对话框
      questionDialogVisible: false,
      // 审核对话框
      checkDialogVisible: false,
      // 审核对话框表单
      checkForm: {
        chkState: '1'
      },
      shelvesData: {},
      removeData: {},
      previewData: {},
      radio: 1,
      show: false,
      checkList: [],
      subjectList: [],
      // 二级目录,标签请求体
      directory: {},
      // 二级目录
      secondDirectory: [],
      tagList: [],
      questionType: [],
      difficulty: [],
      direction: [],
      UserList: [],
      provinces: [],
      area: [],
      flag: []
    }
  },
  created () {
    this.getQuestionsChoice()
    this.getSubject()
    this.questionType = questionType
    this.difficulty = difficulty
    this.direction = direction
    this.provinces = provinces
    this.citys = citys
    this.getUsers()
  },
  methods: {
    // 精选题库列表
    async getQuestionsChoice () {
      const { data: res } = await choice(this.queryData)
      this.QuestionsChoiceList = res.items
      this.total = res.counts
    },
    // 学科列表
    async getSubject () {
      const { data: res } = await subjectSimple()
      this.subjectList = res
    },
    getFunction () {
      this.getSecondDirectory()
      this.getTags()
    },
    // 二级目录列表
    async getSecondDirectory () {
      this.directory.subjectID = this.queryData.subjectID
      const { data: res } = await simple(this.directory)
      this.secondDirectory = res
    },
    // 标签列表
    async getTags () {
      this.directory.subjectID = this.queryData.subjectID
      const { data: res } = await tagSimple(this.directory)
      this.tagList = res
    },
    // 录入人列表
    async getUsers () {
      const { data: res } = await userSimple()
      this.UserList = res
    },
    // 获取地区
    getArea () {
      const city = this.provinces()
      this.area = this.citys(city[this.queryData.province])
      console.log(this.area)
    },
    // 清空搜索
    clearClick () {
      this.queryData = {
        page: 1,
        pagesize: 5
      },
      this.getQuestionsChoice()
    },
    // 进入试题录入
    questionEntry () {
      this.$router.push('/questions/new')
    },
    entryQusetion (id) {
      this.$router.push(`/questions/new?id=${id}`)
    },
    handleSizeChange (pagesize) {
      this.queryData.pagesize = pagesize
      this.getQuestionsChoice()
    },
    handleCurrentChange (pagenum) {
      this.queryData.page = pagenum
      this.getQuestionsChoice()
    },
    async tabsClick (tab) {
      // console.log(tab)
      if (tab.name==="all") this.queryData.chkState = null
      else if (tab.name==="Pending") this.queryData.chkState = 0
      else if (tab.name==="checked") this.queryData.chkState = 1
      else this.queryData.chkState = 2
      const { data: res } = await choice(this.queryData)
      this.QuestionsChoiceList = res.items
      this.getQuestionsChoice()
    },
    // 题目预览
    async questionPreview (row) {
      this.questionDialogVisible = true
      const { data: res } = await detail(row)
      this.previewData = res
      this.radio = this.previewData.options.findIndex(item=>item.isRight===1)
      this.previewData.options.forEach((item,i) => {
        this.flag[i] = true
        if(item.isRight === 1) {
          this.checkList.push(i)
          this.flag[i] = false
        }
      })
    },
    // 打开审核对话框
    checkClick (id) {
      this.checkDialogVisible = true
      this.checkForm.id = id
    },
    // 关闭审核对话框重置表单
    closeCheckChoice () {
      this.$refs.checkFormRef.resetFields()
    },
    // 审核确认
    async questionCheck () {
      this.checkForm.chkState = parseInt(this.checkForm.chkState)
      const res = await choiceCheck(this.checkForm)
      if (res.status !== 200) return this.$message.error('审核失败')
      this.$message.success('审核成功')
      this.checkDialogVisible = false
      this.getQuestionsChoice()
    },
    // 上架/下架
    isShelves (row) {
      const str=row.publishState===0? '上':'下'
      console.log(str)
      this.$confirm( `您确认${str}架这道题目吗?`, '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(async () => {
        console.log(row)
        this.shelvesData.id = row.id
        this.shelvesData.publishState = row.publishState ===0 ? 1 : 0
        const res = await choicePublish(this.shelvesData)
        if(res.status !== 200) return this.$message.error(`${str}架失败`)
        this.$message.success(`${str}架成功`)
        this.getQuestionsChoice()
      }).catch(() => {
        this.$message(`已取消${str}架`);          
      })
    },
    // 删除题目
    removeQuestion (id) {
      this.removeData.id = id
      this.removeData.choiceState = 0
      this.$confirm('此操作将永久删除该题目, 是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(async () => {
        const res = await choiceAdd(this.removeData)
        if(res.status !== 200) return this.$message.error('删除架失败')
        this.$message.success('删除成功')
        this.getQuestionsChoice()
      }).catch(() => {
        this.$message('已取消删除')
      })
    },
    videoPlay () {
      this.show = true
    }
  }
}
</script>

<style scoped lang='less'>
.questions_choice {
  padding: 20px;
  /deep/.el-card {
    min-width: 820px;
    overflow-x: scroll;
  }
  .el-pagination {
    float: right;
    margin: 20px 0;
  }
  .preview {
    .el-col {
      padding: 10px 0;
    }
  }
  .choose {
    padding: 8px 0;
    .el-radio__label {
      padding-left: 10px;
    }
  }
  /deep/.checkChoice {
    .el-form-item__content {
      margin-left: 0 !important;
      width: 100%;
    }
  }
  .video_box {
    width: 400px;
    height: 300px;
    video {
      width: 100%;
      height: 100%;
    }
  }
  .btn_wrapper {
    position: relative;
    height: 32px;
    margin-bottom: 15px;
    .dir_right {
      position: absolute;
      top: 0;
      right: 0;
    }
  }
  /deep/.el-form-item {
    display: flex;
    .el-form-item__label {
      min-width: 100px;
    }
  }
  .el-form--inline .el-form-item {
    margin-right: 0;
  }
}
</style>
